{% extends "global/Page.html" %}
{{ block title }}

{{ endblock }}



{{ block content }}
<style>
    label.btn.btn-default.btn-secondary.active {
        background: yellow;
        color: black;
    }

</style>
<script src="{{ static 'global/js/survey.jquery.min.js'}}"></script>
<script src="{{ static 'global/js/showdown.min.js'}}"></script>

<div class="otree-body container">
    <div class="card">

        <div class="card-body">
            <h5 class="card-title">Вспомните следующее утверждение:</h5>
            <div class="card-text lead text-center">{{ Constants.statement_lgbt }}</div>

        </div>
    </div>
    <div id="surveyElement" style="display:inline-block;width:100%;"></div>
</div>
<input type="hidden" id="surveyholder" name="surveyholder">
<script>
    var genStat = "**<u>{{ reverted_opinion }}</u>** с приведенным выше утверждением?"
    var genStatSingle = "**<u>{{ reverted_opinion_single }}</u>**  с приведенным выше утверждением?"
    Survey.defaultBootstrapCss.navigationButton = "btn-primary btn-lg";
    Survey
        .StylesManager
        .applyTheme("bootstrap");
    var rateValues=[
                        "Полностью неприемлемо",
                        "Испытываю некоторые затруднения",
                        "Не вижу серьезных проблем",
                        "Не испытываю малейших проблем"
                    ]

    var json = {
        showCompletedPage: false,requiredText:'', "completeText": {{ Constants.NEXT_BTN|json }},
        requiredErrorText: {{Constants.REQUIRED_MSG|json}},
        questions:
            [
                {
                    isRequired: true,
                    requiredErrorText: {{Constants.REQUIRED_MSG|json}},
                    "hideNumber": true,
                    "type": "radiogroup",
                    "name": "sdi_politics",
                    "title": `Насколько приемлемо вам было бы **говорить о политике** с людьми, которые  ${genStat}`,
                    "choices": rateValues
                },
                {
                    isRequired: true,
                      requiredErrorText: {{Constants.REQUIRED_MSG|json}},
                    "hideNumber": true,
                    "type": "radiogroup",
                    "name": "sdi_neighbors",
                    "title": `Насколько приемлемо для вас было бы, если бы ваши **соседи** были бы ${genStat}`,
                     "choices": rateValues
                },
                {
                    isRequired: true,
                      requiredErrorText: {{Constants.REQUIRED_MSG|json}},
                    "hideNumber": true,
                    "type": "radiogroup",
                    "name": "sdi_friends",
                    "title": `Насколько приемлемо для вас было бы, если ваши **близкие друзья** были бы  ${genStat}`,
                     "choices": rateValues
                },
                {
                    isRequired: true,
                      requiredErrorText: {{Constants.REQUIRED_MSG|json}},
                    "hideNumber": true,
                    "type": "radiogroup",
                    "name": "sdi_family",
                    "title": `Предположим, ваш сын или дочь собираются жениться/выйти замуж.
                    Как бы вы себя чувствовали, если бы он или она женились/вышли замуж за человека, который ${genStatSingle}`,
                    "choices": [
                       "Я бы совершенно не расстроился",
                        "Я бы скорее не расстроился ",
                        "Я бы немного расстроился",
                        "Я бы сильно расстроился "
                    ]
                }

            ]
    };

    window.survey = new Survey.Model(json);

    survey
        .onComplete
        .add(function (sender) {
            document
            $('#surveyholder').val(JSON.stringify(sender.data, null, 3))
            $('#form').submit()
            ;
        });
    //Create showdown markdown converter
    var converter = new showdown.Converter();
    survey
        .onTextMarkdown
        .add(function (survey, options) {
            //convert the markdown text to html
            var str = converter.makeHtml(options.text);
            //remove root paragraphs <p></p>
            str = str.substring(3);
            str = str.substring(0, str.length - 4);
            //set html
            options.html = str;
        });

    $("#surveyElement").Survey({model: survey});
    ;
</script>


{{ endblock }}
